<template>
  <div>
    <el-row :gutter="12">
      <el-col>
        <el-button type="primary" @click="handleCreate">新建</el-button>
      </el-col>
    </el-row>

    <el-table
      ref="table"
      class="mt10"
      :data="tableData"
      v-loading="loading"
      style="width: 100%"
      current-row-key="id"
      stripe
      border
      highlight-current-row
    >
      <el-table-column prop="key" label="服务编码">
        <template slot-scope="scope">
          {{ scope.row.key }}
          <el-button
            style="margin-left: 10px"
            type="text"
            @click="copy(scope.row.key)"
            icon="el-icon-document-copy"
          ></el-button>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="服务名称" />、
      <el-table-column prop="remark" label="说明" />
      <el-table-column prop="actions" label="操作" width="180">
        <template slot-scope="scope">
          <span
            class="table-actionItem"
          >
            <el-button
              type="text"
              @click="handleEdit(scope.row)"
            >编辑</el-button>
          </span>
          <span
            class="table-actionItem"
          >
            <el-popconfirm
              title="确定要删除该数据服务吗？"
              placement="top"
              @confirm="handleDelete(scope.row)"
            >
              <el-button
                class="link-danger"
                type="text"
                slot="reference"
              >删除</el-button
              >
            </el-popconfirm>
          </span>
          <span v-if="scope.row.scriptId" class="table-actionItem">
            <el-button
              type="text"
              @click="handleDebugScript(scope.row)"
            >调试</el-button
            >
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="tr mt24">
      <x-pagination
        :total="total"
        :pageSize.sync="pageData.pageSize"
        :pageNo.sync="pageData.pageNo"
        @search="loadData"
      />
    </div>
    <DataModal ref="DataModal" :modelInfo="modelInfo"></DataModal>
  </div>
</template>

<script>
import { getVirtualdataservicePagelist, deleteVirtualdataservice } from '@/apis/paas/HmVirtualDataServiceController.js'
import DataModal from './DataModal'
import { copy } from '@/utils/util'
export default {
  name: 'DataList',
  components: {
    DataModal
  },

  props: {
    modelInfo: {
      type: Object,
      default: () => {}
    }
  },

  data () {
    return {
      copy,
      loading: false,
      pageData: {
        pageSize: 10,
        pageNo: 1
      },
      tableData: [],
      total: 0
    }
  },

  methods: {
    init () {
      if (this.total === 0) {
        this.loadData()
      }
    },

    loadData (pageNo = this.pageData.pageNo) {
      getVirtualdataservicePagelist({
        ...this.pageData,
        pageNo,
        modelId: this.modelInfo.id
      }).then((res) => {
        if (res.data.length === 0 && pageNo > 1) {
          this.loadData(pageNo - 1)
          return
        }
        this.tableData = res.data
        this.total = res.totalCount
        this.pageData = {
          pageSize: res.pageSize,
          pageNo: res.pageNo
        }
      })
    },

    handleCreate () {
      this.$refs.DataModal.open(undefined, () => {
        this.loadData(1)
        this.$message.success('操作成功')
      })
    },

    handleEdit (record) {
      this.$refs.DataModal.open(
        {
          ...record
        },
        () => {
          this.loadData()
          this.$message.success('操作成功')
        }
      )
    },

    handleDelete (record) {
      deleteVirtualdataservice([record.id]).then((res) => {
        this.loadData()
        this.$message.success('操作成功')
      })
    },
    // 脚本调试
    handleDebugScript (record) {
      const { origin, pathname } = window.location
      window.open(
        `${origin}${pathname}#/scriptDebug?scriptId=${record.scriptId}`
      )
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
